
/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="gis-control">
  <GisMap v-if="isShowGisMenu" :isTool="false" @onMapInit="onMapInit"/>
  <div class="openatc-serviceroutekanban">
    <leftVipContent
      ref="leftVipContent"
      :chooseId="chooseId"
      @research="research"
      @backClick="backClick"
      @onRouteChange="onRouteChange"
      :editRoute="editRoute"
    ></leftVipContent>
  </div>
  <transition name="slide-fade">
    <div class="duty-panel" v-show="isShowDutyPanel">
      <dutyRoute ref="dutyRoute" :params="params" :isShowPanel="false" @onRouteDeviceChange="onRouteDeviceChange"/>
    </div>
  </transition>
</div>
</template>

<script>
import PlanMenu from './planMenu'
import PlanContent from './planContent'
import GisMap from '../../components/GisMap/index'
import { mapState } from 'vuex'
import leftVipContent from './components/leftVipContent'
import { GetAllViproutes } from '../../api/service'
import dutyRoute from '../GisManager/components/dutyRoute/dutyRoute'
import { SystemconfigApi } from '../../api/systemconfig.js'
import '../../mock/index.js'
import { getMessageByCode } from '../../utils/responseMessage'
export default {
  name: 'groupService',
  components: {
    dutyRoute,
    PlanMenu,
    GisMap,
    leftVipContent,
    PlanContent
  },
  props: {
    chooseId: {
      type: Number
    },
    editRoute: {
      type: Object
    }
  },
  data () {
    return {
      params: {},
      isShowDutyPanel: false,
      editable: true,
      planData: [],
      menuDutyroute: '',
      // chooseId: 0, // 选中的计划id
      loading: false
    }
  },
  computed: {
    ...mapState({
      isShowGisMenu: state => state.globalVariable.isShowGisMenu
    }),
    route () {
      let res = this.planData.filter(ele => ele.id === this.chooseId)[0]
      return res
    }
  },
  mounted () {
    // this.getAllPlan()
    // this.getMemu()
  },
  methods: {
    onMapInit (map) {
      this.params = {
        isShowDevice: true,
        type: '2',
        row: {
          devs: []
        }
      }
    },
    backClick () {
      this.$emit('backClick')
    },
    onRouteDeviceChange (list) {
      let leftVipContent = this.$refs.leftVipContent
      leftVipContent.showTreeCard(list)
    },
    onRouteChange (val) {
      if (!this.params.row || this.params.row.devs.length !== val.devs.length) {
        console.log('onRouteChange:', val)
        setTimeout(() => {
          const paramType = 2 + ''
          this.params = {
            isShowDevice: true,
            type: paramType,
            row: val
          }
        }, 0.5 * 1000)
      }
    },
    getMemu () {
      let reqData = {
        module: 'menu',
        isValid: true
      }
      SystemconfigApi.GetSystemconfigList(reqData).then((data) => {
        let res = data.data
        if (!res.success) {
          console.log('datas:' + res)
          throw new Error('get JupyterUrl error')
        } else {
          for (let config of data.data.data) {
            if (config['key'] === 'dutyroute') {
              this.menuDutyroute = config['value']
            }
          }
        }
      })
    },
    async research (route) {
      this.$emit('research', route)
      // let index = -1
      // await this.getAllPlan()
      // if (this.planData && this.planData.length === 0) {
      //   this.chooseId = 0
      //   return false
      // }
      // for (let i = 0; i < this.planData.length; i++) {
      //   let plan = this.planData[i]
      //   if (plan.id === route.id) {
      //     index = i
      //     break
      //   }
      // }
      // if (index === -1) {
      //   // this.planData.splice(index, 1, route)
      //   let plan = this.planData[this.planData.length - 1]
      //   if (plan) {
      //     route.id = plan.id
      //   }
      // } else if (index > -1) {
      //   this.planData.splice(index, 1, route)
      // } else {
      //   this.planData.splice(0, 0, route)
      // }
      // // let planMenu = this.$refs.planMenu
      // // if (planMenu) {
      // //   planMenu.chooseId = route.id
      // // }
    },
    onExecuteStateChange (val) {
      this.editable = !val
    },
    onBatchClick () {
      if (this.chooseId === 0) {
        this.$message({
          message: this.$t('openatc.dutyroute.nochooseplan'),
          type: 'warning'
        })
        return false
      }
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleBatchExec()
      }
    },
    check () {
      let res = true
      if (this.chooseId === 0) {
        this.$message({
          message: this.$t('openatc.dutyroute.nochooseplan'),
          type: 'warning'
        })
        res = false
      }
      if (!this.editable) {
        this.$message({
          message: this.$t('openatc.dutyroute.notAllowedToEdit'),
          type: 'warning'
        })
        res = false
      }
      return res
    },
    onAddClick () {
      // this.chooseId = 0
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleAdd()
      }
    },
    onEditClick () {
      if (!this.check()) {
        return false
      }
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleEdit()
      }
    },
    onDeleteClick () {
      if (!this.check()) {
        return false
      }
      // let palnContent = this.$refs.planMenu
      // if (palnContent) {
      //   palnContent.onDelete()
      // }
    },
    async getAllPlan () {
      this.loading = true
      await GetAllViproutes().then(res => {
        this.loading = false
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.planData = res.data.data
      })
    },
    chooseRoute (id) {
      this.chooseId = id
      this.editable = true
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.duty-panel {
  width: 360PX;
  height: calc(100vh - 26PX);
  position: absolute;
  top: 10PX;
  right: 10PX;
  z-index: 1000;
  background-color: red;
  box-shadow: 0px 0px 7px 0px rgba(0, 32, 60, 0.19);
}
</style>
